<template>
	<div id="writeDaily" class="w-h-100" style="box-sizing: border-box; overflow: hidden">
		<div class="w-h-100 ver-flex">
			<el-card class="box-card" shadow="hover" :body-style="{ paddingBottom: '0' }">
				<search v-bind="distrubuteSearchConfig">
					<template #footer>
						<el-button type="primary" icon="ele-Search" @click="query" :style="{ display: $hasPer('distributeMaterials:query') ? '' : 'none' }"> {{ $t('6byUl8U10pYbuLt9gcer') }} </el-button>
						<el-button icon="ele-Delete" type="danger" @click="deleteAction" :style="{ display: $hasPer('distributeMaterials:remove') ? '' : 'none' }"> {{ $t('uck_5cKl31hBkFtk9BqCt') }} </el-button>
					</template>
				</search>
			</el-card>
			<el-card class="w-h-100 flex-1" shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
				<el-table ref="tableRef" @expand-change="handleExpandChange" :data="list" :border="true" style="width: 100%" :row-key="getRowKeys" :expand-row-keys="expands">
					<el-table-column type="expand">
						<template #default="props">
							<!-- 全选时,子table选中状态发送改变,在子table中:key="reload"刷新,在父table刷新就会回滚到顶部 -->
							<v-table :data-list="props.row.materials" v-bind="distrubuteTableConfig" :dataCount="props.row.materials.length" :key="reload" @selectItem="selectRow">
								<template #check="scope">
									<el-checkbox
										label=""
										:checked="idArray.indexOf(scope.row.id) == -1 ? false : true"
										@change="
											(v:any) => {
												changSelectAction(v, scope.row);
											}
										"
										>{{}}</el-checkbox
									>
								</template>
								<template #operation="scope">
									<el-button
										icon="ele-Position"
										size="small"
										type="primary"
										@click="
											() => {
												distrubuteAction(scope.row);
											}
										"
										:style="{ display: $hasPer('distributeMaterials:operation') ? '' : 'none' }"
									>
										{{ $t('z0RsYhGgrakDgCk21yrHn') }}
									</el-button>
								</template>
							</v-table>
						</template>
					</el-table-column>
					<el-table-column :label="$t('9CPeUV5LLjDptMgzp8e')" prop="applyNo">
						<template #default="props">
							<div style="display: flex">
								<div style="color: #0152db; width: 300px; font-weight: bold; font-size: 16px">{{ `申请单号:    ${props.row.applyNo}` }}</div>
								<el-button class="btn" icon="ele-DocumentCopy" size="small" style="margin-right: 10px" :data-clipboard-text="props.row.applyNo" @click="copy">
									{{ $t('6NhqW71akugzaeBOcqFz0') }}
								</el-button>
								<el-button
									class="btn"
									icon="ele-CircleCheck"
									size="small"
									style="margin-right: 10px"
									@click="
										() => {
											selectAll(props.row);
										}
									"
								>
									{{ $t('fy7xXn2NBmAwRl1Vblmau') }}
								</el-button>

								<el-button
									icon="ele-Search"
									size="small"
									@click="
										() => {
											checkDetail(props.row);
										}
									"
								>
									{{ $t('ccIis5Uxm077loI4t5Wd5') }}
								</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					v-model:currentPage="pageNo"
					v-model:page-size="pageSize"
					:total="totalRows"
					:page-sizes="[10, 20, 50, 100]"
					small
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</el-card>
		</div>
		<action-form formWidth="30%" ref="actionFormRef" @submit="(param: any) => submitHandle(param)"></action-form>
		<detail-form ref="detailFormRef"></detail-form>
	</div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import getStaticTableData from '/@/utils/staticGetTableData';
//  获取系统应用列表 ,删除app接口
import { getDistributeMList, postDistributeAction, postDeleteDistributeAction } from '/@/api/platformWork/index';
import { search, distrubuteSearchConfig, vTable, distrubuteTableConfig } from './config/index';
import { ElMessage, ElMessageBox } from 'element-plus';

import actionForm from './componment/distrubuteActionForm.vue';
import detailForm from './componment/detailDistrubuteActionForm.vue';
import Clipboard from 'clipboard';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;

const actionFormRef = ref();
const detailFormRef = ref();
const tableRef = ref();
const expands: any = ref([]); //用来管理当前展开的子table集合
const reload = ref(true);
const { list, pageNo, pageSize, totalRows, handleSizeChange, handleCurrentChange, getData } = getStaticTableData(getDistributeMList, {}, distrubuteSearchConfig.searchObj);
//实现选中状态管理
//存储选中的id数组(用来删除)来记录当前的选中状态!!
const idArray: any = ref([]);
//点击多选按钮,切换选中状态
const changSelectAction = (value: any, row: any) => {
	if (value) {
		idArray.value.push(row.id);
	} else {
		idArray.value = idArray.value.filter((item: any) => item != row.id);
	}
};
//点击row,切换选中状态
const selectRow = (row: any) => {
	if (idArray.value.indexOf(row.id) == -1) {
		idArray.value.push(row.id);
	} else {
		idArray.value = idArray.value.filter((item: any) => item != row.id);
	}
	//强制重新渲染子table数据
	reload.value = !reload.value;
};

//记录当前选中行(刷新数据后,依然为展开状态)
const handleExpandChange = (row: any, expandedRows: any) => {
	//当前选中行的数据row: any ,当前展开行的数据
	expands.value = [];
	for (let i = 0; i < expandedRows.length; i++) {
		const obj = expandedRows[i];
		expands.value.push(obj.id);
	}
};
//全选
const selectAll = (row: any) => {
	//nexttick获取数据改变以后的最新dom
	nextTick(() => {
		//全选后如果未展开状态,添加到expands中展开
		if (expands.value.indexOf(row.id) == -1) {
			expands.value.push(row.id);
		}
		row.materials.forEach((element: any) => {
			if (idArray.value.indexOf(element.id) == -1) {
				idArray.value.push(element.id);
			}
		});
		//强制重新渲染数据
		reload.value = !reload.value;
	});
};

//获取row的key值,row的值就是服务器返回的数组中每一个元素!!
const getRowKeys = (row: any) => {
	return row.id; //id为table每一栏的id
};

//查看某条数据详情
const checkDetail = (data: any) => {

	detailFormRef.value.addNew(data);
};

//查询操作
const query = async (payLoad: any) => {
	const res = await getData(payLoad);

};

//删除
const deleteAction = () => {
	if (idArray.value.length == 0) {
		return ElMessage.warning($t('t5j8quLiYuQp0gBAvCij'));
	}
	ElMessageBox.confirm(`是否删除选中的${idArray.value.length}条数据?`, $t('piOjp1dVaOlnHzZweMZpy'), {
		confirmButtonText: $t('aS2TeoRlOl0vyDe85WYcx'),
		cancelButtonText: $t('3N3XRcGghvk4bP9pEmeiz'),
		type: 'warning',
		center: true,
	})
		.then(async () => {

			const res: any = await postDeleteDistributeAction({
				Ids: idArray.value,
			});
			ElMessage.success($t('conz3HRgW8Ur1IZa9Nt'));
			idArray.value = [];
			getData();
		})
		.catch(() => {});
};

//转派提交表单
const submitHandle = async (param: any) => {

	const res: any = await postDistributeAction({
		Id: param.id,
		StaffID: param.staffName,
	});
	idArray.value = idArray.value.filter((item: any) => item != param.id);
	getData();
};
const copy = () => {
	//new Clipboard('.btn'); 绑定的是按钮的class!!
	var clipboard = new Clipboard('.btn');
	clipboard.on('success', (e) => {
		ElMessage.success($t('vu8UjRMlMoCwjF1ifqKBy'));
		// 释放内存
		clipboard.destroy();
	});
	clipboard.on('error', (e) => {
		// 释放内存
		clipboard.destroy();
	});
};

// 转派操作
const distrubuteAction = (row: any) => {
	actionFormRef.value.addNew(row);
};
</script>
<style lang="scss" scoped>
//vue基本样式
#writeDaily {
	:deep(.el-card__body) {
		height: 100%;
	}
}
//修复子table的错误
:deep(.el-table__body-wrapper .el-table-column--selection > .cell, .el-table__header-wrapper .el-table-column--selection > .cell) {
	display: block;
}
</style>
